<template>
  <el-row :gutter="20" style="height: 700px; padding: 20px">
    <el-col :span="16">
      <div class="grid-content ep-bg-purple" style="height: 100%">
        <div id="bing2" style="height: 100%"></div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content ep-bg-purple" style="height: 100%">
        <div id="bing"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onBeforeUnmount } from "vue";

let myChart;

const initCharts1 = () => {
  const bing = document.getElementById("bing");
  if (bing) {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(bing);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "地区分布",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "center",
        left: "10%",
        orient: "vertical",
        itemGap: 20,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          left: "35%",
          radius: ["45%", "80%"],
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    });
  }
};

onBeforeUnmount(() => {
  myChart.dispose(); // 销毁echarts实例, 都会减少内存占用
});

// const initCharts2 = () => {
//   // 基于准备好的dom，初始化echarts实例
//   const myChart = echarts.init(document.getElementById("bing2"));
//   // 绘制图表
//   myChart.setOption({
//     title: {
//       text: "交易总金额",
//       subtext: "单位(万元)",
//     },
//     tooltip: {
//       trigger: "axis",
//     },
//     legend: {
//       data: ["服饰", "房屋", "哈哈"],
//       right: 30,
//     },
//     grid: {
//       left: "3%",
//       right: "4%",
//       bottom: "3%",
//       containLabel: true,
//     },
//     xAxis: {
//       type: "category",
//       boundaryGap: false,
//       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//     },
//     yAxis: {
//       type: "value",
//     },
//     series: [
//       {
//         name: "服饰",
//         type: "line",
//         data: [120, 132, 101, 134, 90, 230, 210],
//       },
//       {
//         name: "房屋",
//         type: "line",
//         data: [220, 182, 191, 234, 290, 330, 310],
//       },
//       {
//         name: "哈哈",
//         type: "line",
//         data: [150, 232, 201, 154, 190, 330, 410],
//       },
//     ],
//   });
// };

onMounted(() => {
  initCharts1();
  // initCharts2();
});
</script>

<style scoped>
#bing {
  height: 340px;
  border: 1px solid #000;
}
</style>
